import React, { useState } from 'react';
import { Tree,Button } from 'antd';

const myMenuList = new Array(6).fill(null).map((_, i) => {
  return {
    key: `title${i}`,
    icon: null,
    title: `title${i}`,
    children: new Array(4).fill(null).map((_, j) => {
      return {
        key: `title${i}${j}`,
        title: `title${i}${j}`,
        children: new Array(4).fill(null).map((_, k) => {
          return {
            key: `title${i}${j}${k}`,
            title: `title${i}${j}${k}`,
          };
        }),
      };
    }),
  };
});

const App = () => {
  const [gMenuList, sMenuList] = useState(myMenuList)
    
  const onDragEnter = (info) => {
    console.log(info);
    // expandedKeys, set it when controlled is needed
    // setExpandedKeys(info.expandedKeys)
  };

  const onDrop = (info) => {
    console.log(info);
    
    const dropKey = info.node.key;
    const dragKey = info.dragNode.key;
    const dropPos = info.node.pos.split('-');
    // the drop position relative to the drop node, inside 0, top -1, bottom 1
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); 

    const loop = (data, key, callback) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key === key) {
          return callback(data[i], i, data);
        }
        if (data[i].children) {
          loop(data[i].children, key, callback);
        }
      }
    };
    const data = [...gMenuList];

    // Find dragObject
    let dragObj;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });
    if (!info.dropToGap) {
      // Drop on the content
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
        item.children.unshift(dragObj);
      });
    } else {
      let ar = [];
      let i;
      loop(data, dropKey, (_item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        // Drop on the top of the drop node
        ar.splice(i, 0, dragObj);
      } else {
        // Drop on the bottom of the drop node
        ar.splice(i + 1, 0, dragObj);
      }
    }
    sMenuList(data);
  };

  const onAddNode = (key) => {
    const newKey = `${key}-${Date.now()}`;
    const newNode = { key: newKey, title: `New Node ${newKey}` };

    const loop = (data, key, callback) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key === key) {
          return callback(data[i], i, data);
        }
        if (data[i].children) {
          loop(data[i].children, key, callback);
        }
      }
    };

    const data = [...gMenuList];
    loop(data, key, (item) => {
      item.children = item.children || [];
      item.children.push(newNode);
    });

    sMenuList(data);
  }

  const onDeleteNode= (key) => {
    const loop = (data, key, callback) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key === key) {
          return callback(data, i);
        }
        if (data[i].children) {
          loop(data[i].children, key, callback);
        }
      }
    };
  
    const data = [...gMenuList];
    loop(data, key, (arr, index) => {
      arr.splice(index, 1);
    });
  
    sMenuList(data);
  }

  const generateTreeNodes = (data) =>
    data.map((item) => ({
      ...item,
      title: (
        <span className='menu-list-item'>
          <div className='title'>
            {item.title}
          </div>
          <div className='btn'>
            <Button size="small" type="link"
              onClick={() => onAddNode(item.key)}>
              新增
            </Button>
            <Button size="small" type="link"
              danger
              onClick={() => onDeleteNode(item.key)}>
              删除
            </Button>
          </div>
        </span>
      ),
      children: item.children ? generateTreeNodes(item.children) : [],
    }));

  //设置不可拖拽
  const customDraggable = (node) => {
    return node.key !== 'title0'
  }
  return (
    <Tree
      className="my-menu-tree-edit"
      showLine={true}
      draggable={(node) => customDraggable(node)}
      blockNode
      onDragEnter={onDragEnter}
      onDrop={onDrop}
      treeData={generateTreeNodes(gMenuList)}
    />
  );
};
export default App;